<template>
    <view class="glo-tabbar">
        <view class="tabbar-content">
            <view class="tabbar-item tabbar-home" @click="handleTabbarClick(tabbarList.home)">
                <sc-image
                    :src="active === tabbarList.home.id ? tabbarList.home.activeIcon : tabbarList.home.inactiveIcon"
                    width="90" height="68"></sc-image>
                <text>{{ tabbarList.home.name }}</text>
            </view>
            <view class="tabbar-item tabbar-order" @click="handleTabbarClick(tabbarList.order)">
                <image
                    :src="active === tabbarList.order.id ? tabbarList.order.activeIcon : tabbarList.order.inactiveIcon">
                </image>
                <text>{{ tabbarList.order.name }}</text>
            </view>
            <view class="tabbar-item tabbar-my" @click="handleTabbarClick(tabbarList.my)">
                <sc-image :src="active === tabbarList.my.id ? tabbarList.my.activeIcon : tabbarList.my.inactiveIcon"
                    width="90" height="68"></sc-image>
                <text>{{ tabbarList.my.name }}</text>
            </view>
        </view>
        <view class="tabbar-zw"></view>
    </view>
</template>

<script setup>
const props = defineProps({
    active: {
        type: String,
        default: 'home'
    },
})
const tabbarList = ref({
    home: {
        id: 'home',
        path: '/pages/home/home',
        name: '首页',
        activeIcon: '/static/tabbar/tabbar_home_1.png',
        inactiveIcon: '/static/tabbar/tabbar_home_1.png',
        type: 'home'
    },
    order: {
        id: 'order',
        path: '/pages/order/order',
        name: '创建订单',
        activeIcon: '/static/tabbar/tabbar_cj.png',
        inactiveIcon: '/static/tabbar/tabbar_cj.png',
        type: 'order'
    },
    my: {
        id: 'my',
        path: '/pages/my/my',
        name: '我的',
        activeIcon: '/static/tabbar/tabbar_my_2.png',
        inactiveIcon: '/static/tabbar/tabbar_my_2.png',
        type: 'my'
    },
})
const emits = defineEmits(['openOrder'])
const handleTabbarClick = (item) => {
    if (item.type === 'order') {
        emits('openOrder')
        return
    }
    uni.navigateTo({
        url: item.path
    })
}
</script>

<style lang="scss" scoped>
.tabbar-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 137rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 131rpx;
    background-color: #fff;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);

    .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        >text {
            font-weight: 400;
            font-size: 23rpx;
            color: #3D3D3D;
            line-height: 32rpx;
        }
    }

    .tabbar-order {
        >image {
            position: absolute;
            top: -20rpx;
            width: 100rpx;
            height: 100rpx;
        }

        >text {
            position: relative;
            top: 80rpx;
        }
    }
}

.tabbar-zw {
    width: 100vw;
    height: 131rpx;
    background-color: transparent;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
}
</style>